@import "../common.scss";

body {
  background-color: #F7F7F7;
}

.mescroll{
	position: relative;
}

  .header-wapper {
    position: relative;
    .header-search {
      position: absolute;
      z-index: 10;
      top: 0;
      width: 100%;
      .search {
        height: ws(34);
        margin: 0 ws(15);
        margin-top: ws(5);
        border-radius: ws(30);
        background-color: rgba(#fff, .6);
        display: flex;
        align-items: center;
        padding: 0 ws(15);
        font-size: ws(14);
        color: #6c6c6c;
        .mui-icon {
          color: #6c6c6c;
          font-size: ws(20);
          margin-right: ws(5);
        }
      }
    } 
    .header-swiper {
      .swiper-container {
        height: ws(200);
        .swiper-pagination-bullet-active {
          background: #fff;
        }
        .swiper-slide {
          position: relative;
          &::after {
            content: '';
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(rgba(#fff, .4), rgba(#000, 0));
          }
          .swiper-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
	
	.header-fiexd {
			position: fixed;
			top: 0;
			padding: 0 ws(15);
			width: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			z-index: 1000;
			.header-wapper {
					height: ws(50);
					display: flex;
					color: #000;
					align-items: center;
					justify-content: space-between;
					.search {
						flex: 1;
						height: ws(34);
						border-radius: ws(30);
						background-color: #eee;
						display: flex;
						align-items: center;
						padding: 0 ws(15);
						font-size: ws(14);
						color: #6c6c6c;
						.mui-icon {
							color: #6c6c6c;
							font-size: ws(20);
							margin-right: ws(5);
						}
					}
			}
	}
	
	.content{
		height: 100%;
	}
	
  .module-list {
    margin: 0 ws(15);
    margin-top: ws(15);
    height: ws(110);
    background-color: #fff;
    border-radius: ws(7);
    display: flex;
    align-items: center;
    box-shadow: 0 ws(4) ws(10) 0 rgba($main-color, 0.15);
    > div {
      width: 25%;
    }
    .list-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: ws(10);
      .icon {
        width: ws(40);
        height: ws(40);
        background-image: linear-gradient(45deg, $main-color 0%, lighten($main-color, 20%) 100%);
        margin-bottom: ws(10);
        border-radius: ws(40);
				display: flex;
				align-items: center;
				justify-content: center;
				img{
					width: ws(25);
				}
      }
      .title {
        font-size: ws(26/2);
        color: $main-color;
      }
    }
  }

  .mudule-class {
		margin-top: ws(30);
    .title-warpper {
      padding: 0 ws(20);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        line-height: ws(20);
        font-size: ws(20);
        color: #000;
      }
      .more {
        font-size: ws(12);
        color: #7f7f7f;
        .mui-icon {
          margin-right: ws(-6);
          color: #a7a5a5;
          font-size: ws(14);
        }
      }
    }
    .list {
			padding: ws(15);
			padding-bottom: ws(30);
      .list-item {
        border-radius: ws(5);
        background-color: #fff;
        box-shadow: $shaow-bottom;
				overflow: hidden;
				margin-bottom: ws(15);
        .item-warpper {
          display: flex;
          .item-image {
            width: ws(200/2);
            height: ws(170/2);
            margin-right: ws(5);
            background: #eee;
						> img{
							object-fit: cover;
							width: 100%;
							height: 100%;
						}
          }
          .item-desc {
						padding: 0 ws(10);
            flex: 1;
            display: flex;
            flex-direction: column;
						justify-content: center;
            .title {
              font-size: ws(28/2);
							line-height: ws(21);
              color: #414141;
							font-weight: bold;
              @include one-line;
            }
            .flex-sal {
              display: flex;
							align-items: center;
              padding: ws(4) 0;
              .price {
                font-size: ws(30/2);
                font-weight: bold;
                color: #ff0c35;
              } 
							.icon{
								width: ws(15);
								height: ws(15);
								margin-right: ws(5);
							}
              .distance {
                font-size: ws(12);
                color: $main-color;
              }
              .like{
                display: flex;
                align-items: center;
                padding: ws(1) ws(4);
                font-size: ws(12);
                background-color: #ff0c35;
                color: #fff;
                border-radius: ws(5);
                .mui-icon{
                  font-size: ws(12);
                  margin-right: ws(2);
                }
              }
            }
            .item-map{
							margin-top: ws(3);
							width: ws(215);
							@include one-line;
							img{
								width: ws(10);
								height: ws(12);
								vertical-align: middle;
							}
            }
          }
        }
        .item-discounts {
          @include border-line(#bbb, top);
          .son {
            display: flex;
            justify-content: space-between;
            .son-text {
              width: ws(440/2);
              @include one-line;
            }
            .son-price{
              display: flex;
              align-items: center;
              .minus{
                font-size: ws(15);
                font-weight: bold;
                color: #ff0c35;
                margin-right: ws(4);
              }
              .normal{
                font-size: ws(12);
                color: #adadad;
                text-decoration:line-through;
                font-style: italic;
              }
            }
          }
        }
      }
    }
  }


.zanwu-style{
	width: 100%;
	height: 100%;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	> img {
		width: ws(100);
	}
}
